﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加好友/群页面 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link href="~/layui/css/pc/layim/layim.css" rel="stylesheet" />
    <link href="~/layui/css/pc/layer/layer.css" rel="stylesheet" />
    <link href="~/css/search.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
    <script>
  
        layui.use(['jquery', 'laytpl','layer'], function (j, l,ly) {
            var $ = j;
            var laytpl = l;
            var layer = ly;
            var config = {
                pageindex: 1,
                pagesize: 50
            };
           
            var userid = localStorage.getItem('currentUserId');
            var events = {
                search: function (obj) {
                    if (obj) {
                        config.pageindex = 1;
                    }
                    var keyword = $('#userKeyWord').val();
                    var t = { people: 1, group: 2 };
                    var val = $('input:radio[name="findtype"]:checked').val();
                    var temp = val == 1 ? "users" : "group";
                   
                    //
                    if (config.pageindex == 1) {
                        $('.layui-layim-list').html('');
                    }
                    $.get('/search/users?t=' + Math.random() + '+&type=' + val + '&pageindex=' + config.pageindex + '&pagesiz=' + config.pagesize + '&keyword=' + encodeURIComponent(keyword), function (result) {
                        if (result.data.list && result.data.list.length) {

                            var gettpl = $('#tempalte_' + temp).html();
                            laytpl(gettpl).render(result.data, function (html) {
                                if (config.pageindex == 1) {
                                    $('.layui-layim-list').html(html);
                                } else {
                                    $('.layui-layim-list').append(html);
                                }
                            });
                        }
                    });
                },
                addfriend: function (obj) {
                    var toUserId = obj.data('id');
                    if (toUserId == userid) {
                        layer.alert('您不能加自己为好友');
                        return;
                    }
                    var im = obj.data('im');
                    var html = '<div>您将添加(' + im + ')为好友，附加消息:</div><div class="layim-chat-textarea" style="margin-left:0px;"><textarea style="border:1px solid gray;width:100%;margin-top:5px;" maxlength="15" id="txtarea_otherinfo">你好,我是</textarea></div>';
                    layer.confirm(html, {
                        title: '好友申请'
                   , shade: [0.8, '#393D49'],
                        yes: function (index) {
                            var parameter = { userid: userid, targetid: toUserId, other: $('#txtarea_otherinfo').val() };
                            $.post('/layimapi/apply', parameter, function (result) {
                                if (result.code == 0) {
                                    if (result.data == -1) {
                                        layer.alert('该用户已经是您的好友了');
                                    } else {
                                        layer.alert('申请好友请求已发送');
                                    }
                                } else {
                                    layer.alert('申请好友请求发送失败，请重试!');
                                }
                            });
                        }
                    });


                },
                creategroup: function () {
                    var url = '/home/creategroup';
                    var index = layer.open({
                        type: 2
                         , title: '创建群组'
                         , shade:[0.8, '#393D49']
                         , area: ['400px', '350px;']
                         , skin: 'layui-box layui-layer-border'
                         , id: 'layui-layim-creategroup'
                         , content: url
                    });
                    window.closeLayer =function(){
                        layer.close(index);
                    } 
                },
                addgroup: function (obj) {
                    var gid = obj.data('id');
                    var groups = window.parent.getUserGroups();
                    if (groups.length) {
                        var exist = $.inArray(gid.toString(), groups);
                        console.log(exist);
                        if (exist > -1) {
                            layer.msg('您已经是群成员了');
                            return;
                        }
                    }
                    //加群
                    var im = obj.data('im');
                    var html = '<div>附加消息:</div><div class="layim-chat-textarea" style="margin-left:0px;"><textarea style="border:1px solid gray;width:100%;margin-top:5px;" maxlength="15" id="txtarea_otherinfo">你好,我是</textarea></div>';
                    layer.confirm(html, {
                        title: '加群申请'
                   , shade: [0.8, '#393D49'],
                        yes: function (index) {
                            var parameter = { userid: userid, targetid: gid, other: $('#txtarea_otherinfo').val(),isfriend:false };
                            $.post('/layimapi/apply', parameter, function (result) {
                                if (result.code == 0) {
                                    if (result.data == -1) {
                                        layer.alert('该用户已经是您的好友了');
                                    } else {
                                        layer.alert('加群请求已发送');
                                    }
                                } else {
                                    layer.alert('加群请求发送失败，请重试!');
                                }
                            });
                        }
                    });
                }
            }

            $(function () {
                events.search();
                $(document).on('click', '*[data-event]', function (e) {
                    var othis = $(this);
                    var event = othis.data('event');
                    events[event] ? events[event].call(this, othis, e) : '';
                });
            });
        });
    </script>
</head>
<body>
    <div style="margin-top:10px;margin-left:5px;width:95%;height:50px;left:25px;">
    <input id="userKeyWord" type="text" style="height:30px;width:50%" placeholder="IM/昵称">
    <button data-event="search" class="layui-form-button">查找</button>
        <input type="radio" name="findtype" id="radio_findpeople" value="1" checked="checked"/>找人
        <input type="radio" name="findtype" value="2" />找群
        <a href="#"  data-event="creategroup" style="margin-left:10px;color:orange" title="我是群主我做主，快快建群吧">我要建群</a>
    </div>
    <div style="margin-top:10px;">
    <ul class="layui-layim-list">
       
    </ul>
        </div>
</body>
</html>

<script type="text/html" id="tempalte_users">
    {{# for(var i = 0, len = d.list.length; i < len; i++){ }}
    <li style="float:left;width:200px;">
        <img src="{{ d.list[i].avatar }}">
        <span title="{{ d.list[i].nickname}}({{ d.list[i].im  }})">
            {{ d.list[i].nickname}}({{ d.list[i].im  }})
        </span>
        <p>
            {{ d.list[i].sign||d.list[i].provincestr+' '+d.list[i].citystr }}
        </p>
        <div style="width:200px;height:50px;">
            <button class="layui-form-button btn-add" data-event="addfriend" data-im="{{ d.list[i].im  }}" data-id="{{ d.list[i].id }}">加好友</button>
        </div>
    </li>
    {{# } }}
</script>
<script type="text/html" id="tempalte_group">
    {{# for(var i = 0, len = d.list.length; i < len; i++){ }}
    <li style="float:left;width:200px;">
        <img src="{{ d.list[i].avatar }}">
        <span title="{{ d.list[i].groupname}}({{ d.list[i].im  }})">
            {{ d.list[i].groupname}}({{ d.list[i].im  }})
        </span>
        <p>
            （{{ d.list[i].allcount+'/'+d.list[i].limitcount }}）{{ d.list[i].groupdesc||'创建时间:'+(d.list[i].addtimestr) }}
        </p>
        <div style="width:200px;height:50px;">
            <button class="layui-form-button btn-add" data-event="addgroup" data-im="{{ d.list[i].im  }}" data-id="{{ d.list[i].id }}">加群</button>
        </div>
    </li>
    {{# } }}
</script>


